<template>
  <div v-loading="loading" class="price-calendar">
    <div class="app-main-tips-box">
      <div class="title">
        <i class="el-icon-warning" /> 温馨提示
      </div>
      <ul>
        <li>
          1.带有
          <span class="tips-rule">"蓝色"</span>标签的日期当前显示的价格为
          <span class="tips-rule">规则价格</span>， 带有
          <span class="tips-today">"绿色"</span>标签的日期当前显示的价格为在此页设置的
          <span class="tips-today">当日价格</span>。
        </li>
        <li>2.实行的价格的优先级为：当日价格>规则价格；即设有当日价格的日期价格不受规则价格设置的影响，实行当日价格。</li>
      </ul>
    </div>

    <!-- 控制按钮 -->
    <div class="btn-calendar-group flexREC">
      <el-button-group>
        <el-button size="mini" @click="clearCheckbox">清除勾选</el-button>
        <el-button
          size="mini"
          type="primary"
          :disabled="checkboxArr.length<=0"
          @click="openDialogEditPrice(checkboxArr)"
        >批量调整</el-button>
      </el-button-group>
    </div>
    <el-calendar v-model="date" class="calendar-container">
      <template
        slot="dateCell"
        slot-scope="{date, data}"
        :class="{'calendar-card-invalid':$momentMini(date).isBefore(nowDate,'day')}"
      >
        <div
          v-if="formatDate==data.day.split('-').slice(0,2).join('-')"
          class="calendar-card"
          :class="{'calendar-card-invalid':$momentMini(date).isBefore(nowDate,'day')||skuList[data.day]&&skuList[data.day].bookingState===2}"
          @click="checkedDay(date,data)"
        >
          <!-- 日期 -->
          <div class="calendar-day">{{ data.day.split('-')[2] }}</div>

          <!-- 多选按钮 -->
          <div
            v-if="!$momentMini(date).isBefore(nowDate,'day')&&!(skuList[data.day]&&skuList[data.day].bookingState===2)"
            class="checkbox"
          >
            <el-checkbox
              v-model="checkboxArr"
              :label="data.day.split('-').join('')"
              size="small"
              class="large-click-range"
              @click.stop.native
            >
              <span />
            </el-checkbox>
          </div>

          <!-- 特殊价格 -->
          <div
            v-if="skuList[data.day]&&(skuList[data.day].priceType===1||skuList[data.day].priceType===2)"
          >
            <div class="price-card">
              <span class="active-price">￥{{ skuList[data.day].price/100 }}</span>
              <span class="invalid-price">￥{{ productInfo.basePrice/100 }}</span>
            </div>

            <!-- 规则价格 -->
            <el-popover
              placement="top-start"
              :close-delay="0"
              width="300"
              trigger="hover"
              :content="'规则来源：'+skuList[data.day].priceTag"
            >
              <div
                v-if="skuList[data.day].priceType===2"
                slot="reference"
                class="price-tag"
                :class="tagColorOptions[skuList[data.day].priceType]"
              >{{ priceTypeOptions[skuList[data.day].priceType] }}</div>
            </el-popover>

            <!-- 当日价格 -->
            <div
              v-if="skuList[data.day].priceType===1"
              class="price-tag"
              :class="tagColorOptions[skuList[data.day].priceType]"
            >{{ priceTypeOptions[skuList[data.day].priceType] }}</div>
          </div>

          <!-- 原价 -->
          <div v-else class="price-card">
            <div class="base-price">￥{{ productInfo.basePrice/100 }}</div>
          </div>
        </div>
      </template>
    </el-calendar>

    <!-- 弹框调整价格 -->
    <DialogEditPrice ref="editPrice" />
  </div>
</template>

<script>
import DialogEditPrice from './DialogEditPrice'
import { getProductSku } from '../../../api/product'
export default {
  components: {
    DialogEditPrice
  },
  props: {
    productInfo: {
      require: Object
    }
  },
  data() {
    return {
      // 配置
      tagColorOptions: {
        0: 'price-tag-default',
        1: 'price-tag-today',
        2: 'price-tag-rule'
      },
      priceTypeOptions: {
        1: '当日价格',
        2: '规则价格'
      },
      // 状态
      loading: false,
      // 数据
      date: '', // 绑定月份 date格式
      formatDate: '', //  绑定月份 格式化YYYY-MM
      nowDate: '', //  当前日期
      checkboxArr: [], // checkbox绑定值YYYYMMDD
      skuList: {}, // sku date:val
      // skuListDate: [], // sku date
      filterForm: {
        productId: '',
        beginDay: '',
        endDay: ''
      }
    }
  },
  watch: {
    date(val) {
      if (
        this.$momentMini(val)
          .startOf('month')
          .format('YYYY-MM-DD') === this.filterForm.beginDay
      ) { return }
      this.getDate(val)
    },
    productInfo(val) {
      this.initData()
    }
  },
  mounted() {
    this.filterForm.productId = this.productInfo.id
    this.nowDate = this.$momentMini()
    this.getDate()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取日期
    getDate(val = '') {
      if (val) {
        this.filterForm.beginDay = this.$momentMini(val)
          .startOf('month')
          .format('YYYY-MM-DD')
        this.filterForm.endDay = this.$momentMini(val)
          .endOf('month')
          .format('YYYY-MM-DD')
        this.formatDate = this.$momentMini(val).format('YYYY-MM')
      } else {
        this.filterForm.beginDay = this.$momentMini()
          .startOf('month')
          .format('YYYY-MM-DD')
        this.filterForm.endDay = this.$momentMini()
          .endOf('month')
          .format('YYYY-MM-DD')
        this.formatDate = this.$momentMini().format('YYYY-MM')
      }
      this.initData()
    },

    // 获取sku
    initData() {
      this.loading = true
      getProductSku(this.filterForm)
        .then(res => {
          const skuList = {}
          res.data.forEach(v => {
            if (
              v.priceType === 1 ||
                v.priceType === 2 ||
                v.bookingState === 2
            ) {
              skuList[v.effectDate] = v
            }
          })
          this.skuList = skuList
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 按钮组
       */
    // 选择日期
    checkedDay(date, data) {
      if (
        this.$momentMini(date).isBefore(this.nowDate, 'day') ||
          (this.skuList[data.day] && this.skuList[data.day].bookingState === 2)
      ) { return }
      this.openDialogEditPrice([data.day.split('-').join('')])
    },

    // 清除checkbox
    clearCheckbox() {
      this.checkboxArr = []
    },

    // 打开弹框价格调整
    openDialogEditPrice(checkBoxArr) {
      this.$refs.editPrice
        .open({ days: checkBoxArr, productInfo: this.productInfo })
        .then(() => {
          this.initData()
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 容器 */
  .price-calendar {
    min-width: 900px;
    /* 格式化样式 */
    .calendar-container ::v-deep {
      .el-calendar__body {
        padding: 12px 0;
      }
      .el-calendar-day {
        padding: 0;
        height: 100px;
      }
      .el-calendar-table .is-today {
        color: #000;
        background-color: #f2f8fe;
      }
      .el-checkbox__inner {
        width: 22px;
        height: 22px;
        &::after {
          width: 5px;
          height: 10px;
          top: 2px;
          left: 7px;
        }
      }
    }
  }

  /* 按钮 */
  .btn-calendar-group {
    padding: 12px 20px 0;
  }
  /*卡片 */
  .calendar-card {
    position: relative;
    height: 100%;
    padding: 8px;
    text-align: center;
    overflow: hidden;
    .checkbox {
      position: absolute;
      top: 8px;
      right: 0px;
    }
    &-invalid {
      background-color: #f9f9f9;
      color: #909399;
    }
  }

  /* 日期 */
  .calendar-day {
    height: 22px;
    line-height: 22px;
    font-weight: bold;
  }

  /* 价格 */
  .price-card {
    line-height: 34px;
    .invalid-price {
      text-decoration: line-through;
    }
    .active-price {
      color: #ff0052;
    }
    // .base-price {
    //  text-decoration: line-through;
    // }
  }

  /* tag标签 */
  .price-tag {
    display: inline-block;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 14px;
    border-radius: 4px;
  }
  .price-tag-default {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
  }
  .price-tag-rule {
    border: 1px solid #d9ecff;
    color: #409eff;
    background-color: #ecf5ff;
  }
  .tips-rule {
    color: #409eff;
  }
  .price-tag-today {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }
  .tips-today {
    color: #67c23a;
  }

  /* 扩大点击范围 */
  .large-click-range {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      right: -0px;
      bottom: -10px;
      // background-color: red;
    }
  }
</style>
